<template>
  <div class="g-dialog-panel">
    <div class="g-dialog-title">
      <span>Select Wallet</span>
      <div class="g-clickable close" @click="close">
        <i class="iconfont icon-close"></i>
      </div>
    </div>
    <div class="wallet">
      <div class="wallet-list g-scrollbar">
        <div
          class="g-clickable wallet-list__item"
          v-for="(item, i) in list"
          :key="i"
          @click="connect(item)"
        >
          <img :src="item.icon" class="icon" />
          <div class="name">
            <span>{{ item.name }}</span>
          </div>
          <div class="padding">
            <span v-if="item.code === code">Padding...</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { WalletList } from "@/utils/connect";
import { tryConnect } from "@/init";
import { mapState } from "vuex";

export default {
  data() {
    return {
      code: "",
      list: WalletList,
    };
  },
  computed: {
    ...mapState({
      chainCode: (state) => state.chainCode,
    }),
  },
  methods: {
    close() {
      this.$emit("close");
    },
    async connect(item) {
      const { code, connect } = item;
      this.code = code;
      const account = await tryConnect(this.chainCode, code, connect);
      this.code = "";
      if (account) {
        this.$emit("close");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.wallet {
  padding-top: 30px;
}

.wallet-list {
  overflow: auto;

  &__item {
    cursor: pointer;
    height: 60px;
    display: grid;
    align-items: center;
    grid-gap: 8px;
    grid-template-columns: 35px 120px 1fr;
    padding: 0 30px;
    border-radius: 30px;
    background-color: var(--border-color);
    margin-top: 15px;
    transition: all 0.3s ease;

    &:hover {
      background-color: rgba(255, 255, 255, 0.03);
    }

    .icon {
      width: 30px;
      border-radius: 15px;
    }

    .name {
      color: var(--color);
      font-size: 14px;
      font-family: "Roboto Bold";
    }

    .padding {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      span {
        font-size: 14px;
        font-family: "Roboto Medium";
        color: var(--color-des);
      }
    }
  }
}
</style>
